<template>
  <div>
    <el-card>
      <template #header>
        更换头像
      </template>
      <div class="main">
        <img class="img" v-if="!img" src="@/assets/images/avatar.jpg" alt="" />
        <img class="img" v-else :src="img" alt="" />
        <br />
        <input
          type="file"
          accept="image/*"
          @change="inputChange"
          ref="file"
          style="display:none"
        />

        <div class="foot">
          <el-button @click="fileBtn" type="primary">+ 选择图片</el-button>
          <el-button type="success" :disabled="disabled" @click="success"
            >+ 上传头像</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { myUpdateAvatarPatch } from '@/api/user'
export default {
  data () {
    return {
      img: '',
      disabled: true
    }
  },
  methods: {
    inputChange (e) {
      console.log(e.target.files)
      if (e.target.files !== 0) {
        // URL.createObjectURL(),提取文件对象blob在内存中的储存地址
        // blob:通过文件对象表示文件
        // this.img = URL.createObjectURL(e.target.files[0])

        //  将file文件对象转换成base64
        // FileReader:读取本地文件转换成响应你想要的文件格式
        // 实例化
        const fs = new FileReader()
        // 读取完成的监听操作
        fs.onload = e => {
          // e.target.result:读取完成后的数据
          this.img = e.target.result
        }
        // 开始读取转换base64数据格式
        fs.readAsDataURL(e.target.files[0])

        this.disabled = false
      }
    },
    fileBtn () {
      this.$refs.file.click()
    },
    async success () {
      await myUpdateAvatarPatch(this.img)
      this.$message.success('上传成功')
      this.$store.dispatch('login/getUserInfo')
    }
  }
}
</script>

<style lang="less" scoped>
.img {
  width: 350px;
  height: 350px;
}
.foot {
  display: flex;
  justify-content: space-around;
  width: 350px;
}
</style>
